<!-- Font Awesome Icons -->
<link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="dist/css/adminlte.min.css">
<!-- link rel="stylesheet" href="plugins/summernote/summernote-bs4.min.css" -->

<div class="col-md-9">
  <div class="card card-primary card-outline">


    <div class="card-header">
      <label>注意事项：</label>
      <ul>
        <li>支持单轨的 WAV 格式、MP3 格式的录音件识别</li>
        <li>支持 8000Hz、16000Hz 的采样率</li>
        <li>小于512MB</li>
      </ul>
    </div>
    <!-- /.card-header -->

    <div class="card-body">
      <div class="form-group row">
        <input type="file" class="file-input" id="customFile" name="file" accept="audio/mpeg,audio/wav"
          placeholder="选择文件">
        <div class="col-sm-1">
          <input class="form-control" type="checkbox" id="enableSensword" name="enableSensword" checked>
        </div>
        <label class="col-sm-1 col-form-label">启用热词</label>
        <div class="col-sm-1">
          <input class="form-control" type="checkbox" id="enableHotword" name="enableHotword" checked>
        </div>
        <label class="col-sm-1 col-form-label">启用敏感词</label>
      </div>

      <div class="form-group row">
        <input type="button" id="btn_upload" onclick="create_task();" value="提交任务">
      </div>
      <!-- Date and time range -->
      <!--
            <div class="form-group row">
              <label for="reservationtime" class="col-sm-2 col-form-label">预约开始时间：</label>
              <div class="col-sm-10">
                    <div class="input-group-prepend" for="reservationtime">
                      <span class="input-group-text"><i class="far fa-clock"></i></span>
                    </div>
                    <input type="text" class="form-control" id="reservationtime">
                    <input type="checkbox" id="chkStartNow">立即开始</input>
              </div>
            </div>
            -->
      <!-- /.form group -->
      <!-- /.card -->
    </div>
  </div>

  <div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
      <div class="modal-content">
        <img src="images/progress.gif" />
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

  <script src="common/jquery.slim.min.js"></script>
  <script src="common/popper.min.js"></script>
  <script src="common/bootstrap.min.js"></script>
  <script src="common/crypto-js.js"></script>
  <script src="kasrsdk/kasrsdk.js"></script>

  <!-- jQuery -->
  <script src="plugins/jquery/jquery.min.js"></script>
  <!-- Bootstrap 4 -->
  <script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>

  <!-- AdminLTE App -->
  <script src="dist/js/adminlte.min.js"></script>


  <script>
    function hideModalDlg() {
      $("#myModal").modal('hide');
    }

    function modalDlg(show) {
      if (show == true) {
        console.log("show modal dialog");
        $("#myModal").modal({ backdrop: 'false', keyboard: false });
      } else {
        hideModalDlg();
        //setTimeout(hideModalDlg , 3000);
        console.log("hide modal dialog");
      }
    }

    function update_transmit(flag) {
        $.ajaxSetup({ "xhrFields": true });
        $.ajax({
          url: "/update_transmit",
          data: JSON.stringify({ "flag": flag }),
          contentType: "application/json",
          type: "Post",
          traditional: true
        })
    }

    // 正式环境,应该从服务器获取token.
    function getToken(app_id, app_secret) {
      const version = '1';
      const user_id = '';
      const expire = 7200;

      let salt = Math.floor(Math.random() * 100000000);
      let expire_ts = new Date().getTime() + expire;

      const signature = CryptoJS.enc.Base64.stringify(CryptoJS.HmacSHA256(app_id + user_id + salt + expire_ts, app_secret));

      return version + ":" + app_id + ":" + salt + ":" + expire_ts + ":" + signature
    }

    function create_task() {
      //丹丹新增--start
      var dom =$('#customFile')[0];
      var size = dom.files[0] && dom.files[0].size;
      var maxSize = 512 * 1024 * 1024;//512MB
      console.log(size, size > maxSize)
      if (size && size > maxSize) {
          // 文字提示
          alert('文件大小超过512M，请重新导入')
          return;
      }
      //丹丹新增--end

      var formData = new FormData();
      formData.append("file", $('#customFile')[0].files[0])
      formData.append("priority", "0")

      // 检测是否启用敏感词
      if ($('input[name="enableSensword"]:checked').val() == 'on') {
        console.log("启用敏感词")
        formData.append("hot_uid", "test123")
      }

      // 检测是否启用热词
      if ($('input[name="enableHotword"]:checked').val() == 'on') {
        console.log("启用热词")
        formData.append("sensitive_uid", "test123")
      }

      modalDlg(true)
      update_transmit(1)
      $("#btn_upload").attr('disabled', true)
      $.ajax({
        type: 'POST',
        url: '/open/v1/asr/open/task/create',
        data: formData,
        cache: false,
        processData: false,
        contentType: false,
        async: true,
        success: function (data) {
          if (data['error_code'] == 0) {
            alert('创建任务成功')
            var obj = document.getElementById('customFile');
            obj.outerHTML = obj.outerHTML;
            console.log(data)
          } else {
            alert(data['error_desc'])
            update_transmit(0)
          }
          modalDlg(false)
        }, error: function () {
          alert('创建任务失败')
          modalDlg(false)
          update_transmit(0)
        }
      })
      $("#btn_upload").attr('disabled', false)
  }
  </script>
</div>